<template>
	<view class="guide-wiper">
		<view class="guide" @touchmove.stop.prevent="moveHandle" v-if="showGuide">
			<view
				:style="{ top: getStyle.top, left: getStyle.left, width: getStyle.width, height: getStyle.height, boxShadow: getStyle.boxShadow }"
				class="guide-box"
				catchtouchmove="true"
			>
				<view class="tips" :style="{ left: guideInfo.tipStyle.left }">
					<view class="text">{{ guideInfo.tips }}</view>
					<view class="next">
						<text @tap="next">{{ guideInfo.next }}</text>
					</view>
				</view>
				<view class="arrow"></view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			guideList: [
				{
					el: '#input0', // 需要高亮的元素，这里最好唯一
					tips: '点击这里,输入衣物价值可以保价', // 提示文字
					next: '下一步', // 下一步按钮显示文字
					left: 150,
					top: 106,
					style: {
						// 高亮样式
						borderRadius: '12rpx',
						margin: '-10rpx 0 0 -10rpx'
					},
					tipStyle: {
						// tips样式
						left: '-160rpx'
					}
				},
				{
					el: '#Baojia0',
					tips: '点击这里,拍照上传衣物图片',
					next: '下一步',
					left: 259,
					top: 52,
					style: {
						borderRadius: '12rpx',
						margin: '-10rpx 0 0 -32rpx'
					},
					tipStyle: {
						left: '-220rpx'
					}
				},
				{
					el: '#Baozhuang0',
					tips: '点击这里,选择是否需要包装',
					next: '下一步',
					left: 316,
					top: 52,
					style: {
						borderRadius: '12rpx',
						margin: '-10rpx 0 0 -32rpx'
					},
					tipStyle: {
						left: '-296rpx'
					}
				}
			],
			index: 0, // 当前展示的索引
			showGuide: false // 是否显示引导
		};
	},
	computed: {
		guideInfo() {
			return this.guideList[this.index];
		},
		getStyle() {
			const { width, height, left, top, style } = this.guideList[this.index];
			return {
				width: width + 'px',
				height: height + 'px',
				left: left + 'px',
				top: top + 'px',
				...style,
				boxShadow: 'rgb(33 33 33 / 80%) 0px 0px 0px 0px, rgb(33 33 33 / 50%) 0px 0px 0px 5000px'
			};
		}
	},
	async onReady() {
		const guide = uni.getStorageSync('guide_key');
		if (!guide) {
			await this.getDomInfo();
			this.showGuide = true;
		}
	},
	methods: {
		async getDomInfo(i) {
			if (!i) i = 0;
			let query = uni.createSelectorQuery().in(this.$root);
			let { el } = this.guideList[i];
			query.select(el).boundingClientRect(data => {
					console.log(data)
					if (data) {
						this.guideList.splice(i, 1, {
							...this.guideList[i],
							left: data.left,
							top: data.top,
							width: data.width,
							height: data.height
						});
						if (i < this.guideList.length - 1) {
							i++;
							this.getDomInfo(i);
						}
					}
				})
				.exec();
		},
		next() {
			if (this.index === this.guideList.length - 1) {
				this.showGuide = false;
				uni.setStorageSync('guide_key', 'true');
			} else {
				this.index += 1;
			}
		},
		moveHandle() {
			return false;
		}
	}
};
</script>

<style lang="less" scoped>
.guide {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 1000;
	.guide-box {
		position: fixed;
		z-index: 100;
		.arrow {
			height: 20rpx;
			width: 20rpx;
			background: #dc5f45;
			position: absolute;
			top: 70rpx;
			left: 50%;
			transform: rotate(45deg);
		}
		.tips {
			background: #dc5f45;
			box-shadow: 0px 2px 9px 0px rgba(0, 0, 0, 0.1);
			color: #fff;
			position: absolute;
			top: 77rpx;
			left: -50%;
			padding: 15rpx 20rpx;
			font-size: 28rpx;
			border-radius: 12rpx;
			.text {
				white-space: nowrap;
			}
			.next {
				text-align: right;
				padding-right: 0rpx;
				margin-top: 10rpx;
			}
		}
	}
}
</style>
